<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>新区志愿</title>
  <!-- <script src="//webapi.amap.com/maps?v=2.0&key=cee0160bebaf18f246314382d678939a" async></script>
  <script src="//webapi.amap.com/ui/1.1/main.js"></script> -->
  <script crossorigin="anonymous"
    integrity="sha512-weWXHm0Ws2cZKjjwugRMnnOAx9uCP/wUVf84W7/fXQimwYUK28zPDGPprDozomQLpKv6U99xN9PI9+yLI9qxNw=="
    src="https://lib.baomitu.com/echarts/5.3.2-rc.1/echarts.min.js"></script>
  <script crossorigin="anonymous"
    integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg=="
    src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
  <script crossorigin="anonymous"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>
  <div id="app">
    <div class="page">
      <div class="head pr">
        <div class="left pa"><span class="timer pa">{{timer}}</span></div>
        <div class="center pa">新区志愿</div>
        <div class="right pa">
          <div class="logo pa"></div>
        </div>
        <div class="bg pa"></div>
      </div>
      <div class="content">
        <div class="box1 box_bg bx_bb pr">
          <box1 ref="echart1"></box1>
        </div>
        <div class="box2 box_bg bx_bb fcc pr">
          <div class="title pa">▎贡享联盟</div>
          <!-- <box2></box2> -->
          <img class="img" src="./株洲市天元区社区定稿.png" alt="">
        </div>
        <div class="box3 box_bg bx_bb">
          <box3 ref="echart3"></box3>
        </div>
        <div class="box4 bx_bb">
          <!-- box_bg -->
          <box4 ref="echart4"></box4>
        </div>
        <div class="box5 bx_bb">
          <box5></box5>
        </div>
        <div class="box6 box_bg bx_bb">
          <box6 ref="echart6"></box6>
        </div>
      </div>
    </div>
  </div>

  <script>
    var BASE_URL = 'https://xqzyzapi.meidp.com'

  </script>

  <!--  注册志愿者  -->
  <script>
    Vue.component("box1", {
      data: function () {
        return {
          myChart: 0,
          option: 0,
          VolunteerCount: 0,
          PartyCount: 0,
          teamTotal: 0,
          title: `▎注册志愿者 0   党员志愿者 0`,
          data: [
            { value: 7536, name: "2019", color: "#fc7041" },
            { value: 24842, name: "2020", color: "#20a5f7" },
            { value: 14725, name: "2021", color: "#3c5cfa" },
            { value: 1104, name: "2022", color: "#4fd6ff" },
          ],
          colors: [
            "#fc7041",
            "#20a5f7",
            "#3c5cfa",
            "#4fd6ff",
          ],
          serviceTeam: [
            {
              name: "天元区嵩山路街道白鹤社区志愿服务队",
              creator: "陈红梅",
              count: 2861,
            },
            {
              name: "天元区泰山路街道文家冲社区志愿服务队",
              creator: "李思",
              count: 857,
            },
            {
              name: "天元区泰山学校志愿服务队",
              creator: "殷晓庭",
              count: 775,
            },
            {
              name: "雷打石伞铺村星星点灯志愿服务队",
              creator: "李星",
              count: 349,
            },
            {
              name: "株洲市常春艺术团志愿服务队",
              creator: "唐堤树",
              count: 105,
            },
          ],
        };
      },
      template: `
        <div>
          <div id='echart1' style="width:599px;height:200px;"></div>
          <div class='register-data pa'>
            <div class='register-data-item' v-for="item in data">
              <div class="name">{{item.name}}</div>  
              <div class="value">{{item.value}}人</div>  
            </div>
          </div>
          <div class="register-from">
            <div class="title">▎注册志愿服务队伍{{teamTotal}}</div>
            <div class="from">
              <div class="td">
                <div class="index">序号</div>
                <!--<div class="team">队伍名称</div>-->
                <div class="creator">创建人</div>
                <div class="count">活动数量</div>
              </div>
              <div class="row" v-for="(item,index) in serviceTeam">
                <div class="index">{{index+1}}</div>
                <!--<div class="team">{{item.name}}</div>-->
                <div class="creator">{{item.creator}}</div>
                <div class="count">{{item.count}}</div>
              </div>
            </div>
          </div>
        </div>
      `,
      methods: {
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart1"));
          this.option = {
            tooltip: {
              trigger: "item",
            },
            title: {
              text: this.title,
              top: 16,
              left: 10,
              textStyle: {
                fontSize: 18,
                color: "#fff",
                fontWeight: "700",
                lineHeight: 18,
              },
            },
            legend: {
              orient: "vertical",
              itemWidth: 10,
              itemHeight: 10,
              itemGap: 16,
              top: "65",
              right: "15%",
              formatter: (name) => `${name}`,
              textStyle: {
                color: "#d6e2ff",
              },
            },
            series: [
              {
                // name: '注册志愿者',
                type: "pie",
                top: 34,
                left: 90,
                colorBy: "data",
                radius: [40, 56],
                avoidLabelOverlap: false,
                labelLine: {
                  show: false,
                },
                label: {
                  show: false,
                },
                data: this.data,
              },
            ],
            color: this.colors,
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(this.option);
        },
        //获取饼图数据
        getChartData() {
          $.get(BASE_URL + '/basic/Report/GetUserReport', ({ data }) => {
            this.VolunteerCount = data.Count1
            this.PartyCount = data.Count2
            this.data = data.Items.map(i => ({ value: i.Value, name: i.Key }))
            this.myChart.setOption({
              title: {
                text: `▎注册志愿者 ${this.VolunteerCount}   党员志愿者 ${this.PartyCount}`
              },
              series: [
                {
                  data: this.data
                }
              ]
            })
          })
        },
        //获取表单数据
        getFormData() {
          $.get(BASE_URL + '/basic/Report/GetActivityReport', ({ data }) => {
            this.serviceTeam = data.Items.slice(0, 5).map(i => ({ creator: i.Key, count: i.Value }))
            this.teamTotal=data.Count
          })
        }
      },
      mounted() {
        this.initCharts();
      },
      created() {
        this.getChartData()
        this.getFormData()
      }
    });
  </script>

  <!-- 贡享联盟 -->
  <script>
    Vue.component('box2', {
      data() {
        return {
          myChart: null,
          myChart: null,
          parentJson: '',
          parentInfo: null,
          mapData: [],
          pointData: [],
        }
      },
      methods: {
        echartsMapClick(params) {
          console.log(params)
          //如果当前是最后一级，那就直接return
          if (this.parentInfo[this.parentInfo.length - 1].code == params.data.cityCode) {
            return
          }
          let data = params.data
          this.parentInfo.push({
            cityName: data.name,
            level: data.level,
            code: data.cityCode
          })
          this.getGeoJson(data.cityCode)

        },
        getGeoJson(adcode) {
          const that = this
          AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
            var districtExplorer = new DistrictExplorer()
            districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
              if (error) {
                console.error(error);
                return;
              }
              let Json = areaNode.getSubFeatures()
              if (Json.length > 0) {
                parentJson = Json
              } else if (Json.length === 0) {
                Json = parentJson.filter(item => {
                  if (item.properties.adcode == adcode) {
                    return item
                  }
                })
                if (Json.length === 0) return
              }
              //去获取数据
              that.getMapData(Json)
            });
          })
        },
        getMapData(Json) {
          // let mapData = [{
          //         name: '广东省',
          //         value: 1000,
          //         level: 'province',
          //         cityCode: 440000
          // },
          // {
          //         name: '湖南省',
          //         value: 2000,
          //         level: 'province',
          //         cityCode: 430000
          // }]
          this.mapData = Json.map(item => {
            return ({
              name: item.properties.name,
              value: Math.random() * 10,
              level: item.properties.level,
              cityCode: item.properties.adcode
            })
          })
          this.pointData = Json.map(item => {
            return ({
              name: item.properties.name,
              value: ['118.83531246', '32.0267395887', Math.random() * 1000],
              cityCode: item.properties.adcode
            })
          })
          this.mapJson = {}
          //geoJson必须这种格式
          this.mapJson.features = Json

          //去渲染echarts
          this.initCharts(this.mapData, this.pointData, this.mapJson)
        },
        initCharts(mapData, pointData, mapJson) {
          //注册
          echarts.registerMap('Map', mapJson);
          this.myChart = echarts.init(document.getElementById("echart2"))

          //这里加true是为了让地图重新绘制，不然如果你有筛选的时候地图会飞出去
          this.myChart.setOption({
            // backgroundColor: '#062c52',
            // tooltip: {
            //   trigger: "item",
            //   formatter: p => {
            //     let val = p.value;
            //     if (window.isNaN(val)) {
            //       val = 0;
            //     }
            //     let txtCon =
            //       p.name + "<br>" + "<hr>" + "数值 : " + val.toFixed(2);
            //     return txtCon;
            //   }
            // },
            title: {
              show: true,
              left: 16,
              top: 17,
              text: '▎贡享联盟',
              top: 13,
              left: 15,
              textStyle: {
                color: "#fff",
              },
            },
            visualMap: {
              show: false
            },
            itemStyle: {
              areaColor: '#062c52',
            },
            // center: [115.97, 29.71],
            series: [{
              name: "地图",
              type: "map",
              map: "Map",
              roam: true, //是否可缩放
              zoom: 0.8, //缩放比例
              data: mapData,
              itemStyle: {
                normal: {
                  show: true,
                  areaColor: '#fff',
                  borderColor: '#cd95b3',
                  borderWidth: '1',
                },
              },
              label: {
                normal: {
                  show: false, //显示省份标签
                  textStyle: {
                    color: "#000", //省份标签字体颜色
                    fontSize: 12
                  },
                  formatter: p => {
                    let val = p.value;
                    if (window.isNaN(val)) {
                      val = 0;
                    }
                    //
                    switch (p.name) {
                      case '内蒙古自治区':
                        p.name = "内蒙古"
                        break;
                      case '西藏自治区':
                        p.name = "西藏"
                        break;
                      case '新疆维吾尔自治区':
                        p.name = "新疆"
                        break;
                      case '宁夏回族自治区':
                        p.name = "宁夏"
                        break;
                      case '广西壮族自治区':
                        p.name = "广西"
                        break;
                      case '香港特别行政区':
                        p.name = "香港"
                        break;
                      case '澳门特别行政区':
                        p.name = "澳门"
                        break;
                      default:
                      // code
                    }
                    if (p.name === "内蒙古自治区") {
                      p.name = "内蒙古";
                    }
                    let txtCon =
                      p.name;
                    return txtCon;
                  }
                },
                emphasis: {
                  //对应的鼠标悬浮效果
                  show: true,
                  textStyle: {
                    color: "#000"
                  }
                },

              }
            },
            {
              name: '散点',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              rippleEffect: {
                brushType: 'fill'
              },
              itemStyle: {
                normal: {
                  color: '#F4E925',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              data: pointData,
              symbolSize: 8,
              showEffectOn: 'render', //加载完毕显示特效
            },
            ]

          }, true)

          //点击前解绑，防止点击事件触发多次
          this.myChart.off('click');
          this.myChart.on('click', this.echartsMapClick);
        }
      },
      mounted() {
        this.parentJson = null
        this.parentInfo = [{
          cityName: '全国', //全国
          level: 'china', //china
          code: 000000  //430211 000000
        }]
        console.log(this.getMapData)
        this.getGeoJson(100000)
      },

      template: `
          <div id="echart2" style="width:628px;height:472px;"></div>
        `
    })
  </script>

  <!--  个人积分排行  -->
  <script>
    Vue.component("box3", {
      components: {
        level: {
          data() {
            return {
              myChart: null,
              option: null,
              list: [
                { name: "五星", value: 1, standard: 1500 },
                { name: "四星", value: 14, standard: 1000 },
                { name: "三星", value: 46, standard: 600 },
                { name: "二星", value: 84, standard: 300 },
                { name: "一星", value: 427, standard: 100 },
              ],
              chartData: [
                { name: "五星", value: 1 },
                { name: "四星", value: 14 },
                { name: "三星", value: 46 },
                { name: "二星", value: 84 },
                { name: "一星", value: 427 },
              ]
            };
          },
          methods: {
            initCharts() {
              this.myChart = echarts.init(
                document.getElementById("echart3_1")
              );
              this.option = {
                title: {
                  text: "▎星级志愿者",
                  top: 13,
                  left: 15,
                  textStyle: {
                    color: "#fff",
                  },
                },
                // tooltip: {
                //   trigger: "axis",
                //   axisPointer: {
                //     type: "shadow",
                //   },
                // },
                grid: {
                  left: "5%",
                  right: "4%",
                  bottom: "5%",
                  containLabel: true,
                },
                xAxis: [
                  {
                    type: "category",
                    data: this.chartData.map((i) => i.name),
                    axisTick: {
                      alignWithLabel: true,
                    },
                    axisLine: {
                      lineStyle: {
                        color: 'rgba(204,204,204,0.20)'
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#d6e2ff'
                      }
                    }
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                    nameTextStyle: {
                      color: "#d6e2ff",
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: 'rgba(204,204,204,0.20)'
                      }
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#d6e2ff'
                      }
                    }
                  },
                ],
                series: [
                  {
                    name: "Number",
                    type: "bar",
                    barWidth: 20,
                    label: {
                      show: true,
                      // distance:10,
                      position: 'insideTop',
                      offset: [0, -20],
                      formatter: (i) => i.value
                    },
                    itemStyle: {
                      normal: {
                        barBorderRadius: 55,
                        color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            {
                              offset: 0,
                              color: "#2aa9f7",
                            },
                            {
                              offset: 1,
                              color: "#0ff5f8",
                            },
                          ]
                        ),
                      },
                    },
                    data: this.chartData.map((i) => i.value),
                  },
                ],
              };

              this.myChart.setOption(this.option);
            },

          },
          mounted() {
            this.initCharts();
          },
          created() {
          },
          template: `
            <div class='level-volunteer pr'>
                <div id="echart3_1" style="width:400px;height:227px;"></div>
                <div class="standard pa">
                  <div class="item">积分标准</div>
                  <div class="item" v-for="item in list">
                    <sapn>{{item.name}}级</span>  <sapn>{{item.standard}}</span>
                  </div>  
                </div>
            </div>
          `,
        },
      },
      data() {
        return {
          myChart: null,
          option: null,
          integralData: [
            { name: "许菲菲", integral: 1638 },
            { name: "罗菊香", integral: 1584 },
            { name: "罗应波", integral: 1472 },
            { name: "余丽娟", integral: 1458 },
            { name: "黄常文", integral: 1407 },
            { name: "谭利平", integral: 1348 },
          ],
        };
      },
      methods: {
        getMax(list) {
          const len = list.length;
          const max = Math.max(...list);
          return new Array(len).fill(max + 200);
        },
        getRank(n) {
          return `第${n === 0
            ? "一"
            : n === 1
              ? "二"
              : n === 2
                ? "三"
                : n === 3
                  ? "四"
                  : n === 4
                    ? "五"
                    : "六"
            }名`;
        },
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart3"));
          this.option = {
            title: {
              text: "▎个人积分排行榜",
              top: 13,
              left: 15,
              textStyle: {
                color: "#fff",
              },
            },
            grid: {
              left: 30,
              right: "2%",
              bottom: "2%",
              top: "50",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
              },
              formatter: function (params) {
                return params[0].name + " : " + params[0].value;
              },
            },
            xAxis: {
              show: false,
              type: "value",
            },
            yAxis: [
              {
                type: "category",
                inverse: true,
                offset: 40,
                axisLabel: {
                  show: true,
                  align: "left",
                  textStyle: {
                    color: "#d6e2ff",
                  },
                  formatter: (value) => value,
                  rich: {
                    title: {
                      color: "#d6e2ff",
                      fontSize: 12,
                    },
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                data: this.integralData.map((i) => i.name),
              },
              {
                type: "category",
                inverse: true,
                offset: 0,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                  inside: true,
                  textStyle: {
                    color: "#d6e2ff",
                    fontSize: "12",
                  },
                  formatter: (value, index) => this.getRank(index),
                  rich: {
                    title: {
                      color: "#d6e2ff",
                      fontSize: 12,
                    },
                  },
                },
                data: this.integralData.map((i) => i.integral),
              },
            ],
            series: [
              {
                name: "背景",
                type: "bar",
                barWidth: 16,
                barGap: "-100%",
                data: this.getMax(this.integralData.map((i) => i.integral)),
                itemStyle: {
                  normal: {
                    color: "#2b384d",
                    barBorderRadius: 55,
                  },
                },
              },
              {
                name: "值",
                type: "bar",
                barWidth: 16,
                barCategoryGap: "100%",
                zlevel: 1,
                label: {
                  show: true,
                  position: 'insideTopRight',
                  offset: [40, 0],
                  textStyle: {
                    color: '#d6e2ff'
                  }
                },
                itemStyle: {
                  normal: {
                    barBorderRadius: 55,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#20a5f7",
                      },
                      {
                        offset: 0.05,
                        color: "#2AA9F7",
                      },
                      {
                        offset: 1,
                        color: "#0ff5f8",
                      },
                    ]),
                  },
                },
                data: this.integralData.map((i) => i.integral),
              },
            ],
          };

          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(this.option);
        },
        getStarName(n) {
          return (n === 1 ? '一' : n === 2 ? '二' : n === 3 ? '三' : n === 4 ? '四' : n === 5 ? '五' : n === 6 ? '六' : '七') + '星'
        },
        GetUserRankingReport() {
          $.get(BASE_URL + '/basic/Report/GetUserRankingReport', ({ data }) => {
            this.integralData = data.map(i => ({ name: i.Key, integral: i.Value }))
            this.myChart.setOption({
              yAxis: [
                { data: this.integralData.map((i) => i.name) },
                { data: this.integralData.map((i) => i.integral) },
              ],
              series: [
                { data: this.getMax(this.integralData.map((i) => i.integral)) },
                { data: this.integralData.map((i) => i.integral) }
              ]
            })
          })
        },
        GetUserRankingReport2() {
          $.get(BASE_URL + '/basic/Report/GetUserRankingReport2', ({ data }) => {
            const children = this.$children[0]
            children.chartData = data.map(i => ({ name: i.Key, value: i.Value }))
            children.myChart.setOption({
              xAxis: [
                { data: children.chartData.map(i => this.getStarName(parseInt(i.name))) }
              ],
              series: [
                { data: children.chartData.map(i => i.value) }
              ]
            })
          })
        }
      },
      created() {
        this.GetUserRankingReport()
        this.GetUserRankingReport2()
      },
      mounted() {
        this.initCharts();
      },
      template: `
        <div>
          <div id="echart3"  style="width:620px;height:243px;"></div>
          <level ref="echart3_1"></level>
        </div>
      `,
    });
  </script>

  <!-- 活动场次 -->
  <script>
    Vue.component("box4", {
      data() {
        return {
          myChart: null,
          option: null,
          events: [
            { name: "宣传教育", count: 1920 },
            { name: "环境保护", count: 2644 },
            { name: "文化劝导", count: 12938 },
            { name: "卫生健康", count: 1397 },
            { name: "平安守护", count: 22324 },
            { name: "文化服务", count: 5969 },
            { name: "疫情防控", count: 2157 },
            { name: "扶贫帮困", count: 1604 },
          ],
          eventTotal: 58204,
          todayEventCount: 273,
          serverIntegralRecord: [
            {
              name: "总积分",
              record: [
                { time: "2019.9", value: 0 },
                { time: "2020.3", value: 78000 },
                { time: "2020.9", value: 221637 },
                { time: "2021.3", value: 267986 },
                { time: "2021.9", value: 389561 },
                { time: "2022.3", value: 489211 },
              ],
            },
            {
              name: "案例制积分",
              record: [
                { time: "2019.9", value: 0 },
                { time: "2020.3", value: 42167 },
                { time: "2020.9", value: 64823 },
                { time: "2021.3", value: 81233 },
                { time: "2021.9", value: 93455 },
                { time: "2022.3", value: 182168 },
              ],
            },
            {
              name: "项目制积分",
              record: [
                { time: "2019.9", value: 0 },
                { time: "2020.3", value: 69000 },
                { time: "2020.9", value: 175431 },
                { time: "2021.3", value: 215795 },
                { time: "2021.9", value: 308994 },
                { time: "2022.3", value: 412336 },
              ],
            },
          ],
        };
      },
      methods: {
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart4"));
          this.option = {
            title: {
              text: "▎志愿者服务积分",
              top: 17,
              left: 16,
              textStyle: {
                color: "#fff",
              },
            },
            grid: {
              top: 80,
            },
            legend: {
              show: true,
              top: 17,
              textStyle: {
                color: '#d6e2ff'
              },
              itemGap: 29,
              itemWidth: 10,
              itemHeight: 10,
              icon: 'rect',
              data: this.serverIntegralRecord.map(i => i.name)
            },
            xAxis: {
              type: "category",
              data: this.serverIntegralRecord[0].record.map((i) => i.time),
              axisLine: {
                lineStyle: {
                  color: "#19233f",
                },
              },
              axisLabel: {
                textStyle: {
                  color: '#d6e2ff'
                },
              }
            },
            yAxis: {
              name: '分',
              type: "value",
              nameGap: 20,
              nameTextStyle: {
                color: '#d6e2ff'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#19233f", //19233f
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(204,204,204,0.20)'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#d6e2ff'
                },
                formatter: (i) => i > 10000 ? `${i / 10000} 万` : i
              }
            },
            singleAxis: {
              axisTick: {
                lineStyle: {
                  color: "#192440",
                },
              },
            },
            series: [
              {
                name: '总积分',
                symbol: "none",
                data: this.serverIntegralRecord[0].record.map((i) => i.value),
                type: "line",
                lineStyle: {
                  color: "#3c5cfa",
                },
              },
              // {
              //   name: '案例制积分',
              //   symbol: "none",
              //   data: this.serverIntegralRecord[1].record.map((i) => i.value),
              //   type: "line",
              //   lineStyle: {
              //     color: "#bfc0c0",
              //   },
              // },
              // {
              //   name: '项目制积分',
              //   symbol: "none",
              //   data: this.serverIntegralRecord[2].record.map((i) => i.value),
              //   type: "line",
              //   lineStyle: {
              //     color: "#fc7041",
              //   },
              // },
            ],
          };
          this.myChart.setOption(this.option);
        },
        getActiveCounts() {
          $.get(BASE_URL + '/basic/Report/GetActivityReport2', ({ data }) => {
            this.eventTotal = data.Count1
            this.todayEventCount = data.Count2
            this.events = data.Items.slice(0, 8).map(i => ({ name: i.Key, count: i.Value }))
          })
        },
        getIntegrals() {
          $.get(BASE_URL + '/basic/Report/GetActivityScoreReport', ({ data }) => {
            this.serverIntegralRecord.splice(0, 3, { name: '总积分', record: data.map(i => ({ tiem: i.Key, value: i.Value })) })
            this.myChart.setOption({
              legend: {
                data: this.serverIntegralRecord.map(i => i.name)
              },
              xAxis: {
                data: this.serverIntegralRecord[0].record.map(i => i.tiem)
              },
              series: [
                {
                  name: '总积分',
                  data: this.serverIntegralRecord[0].record.map(i => i.value),
                },
              ]
            })
          })
        }
      },
      created() {
        this.getActiveCounts();
        this.getIntegrals();
      },
      mounted() {
        this.initCharts();
      },
      template: `
        <div>
          <div class="event-count">
            <div class="title">▎活动场次 &nbsp;&nbsp;{{eventTotal}}</div>
            <div class="counts-wrap fss pr">
              <div class="counts fss">
                <div class="item pr" v-for="item in events">
                  <div class="name">{{item.name}}</div>  
                  <div class="value pa">{{item.count}}</div>  
                </div> 
              </div>
              <div class="today-count pa">
                <div class='today-count-title'>今日活动数量</div>  
                <div>{{this.todayEventCount}}<span class="unit">场</span></div>
              </div>
            </div>
          </div>
          <div id="echart4" class="server-integral" style="width:599px;height:270px;"></div>
        </div>
      `,
    });
  </script>

  <!-- 贡享爱心商家/达人 -->
  <script>
    Vue.component("box5", {
      data() {
        return {
          myChart: null,
          option: null,
          exchangeGoodCount: 0,
          exchangeIntegralCount: 0,
          icons: [
            {
              name: "贡享爱心商家",
              value: 260,
              img: "./贡享爱心商家.png",
            },
            {
              name: "美食美发",
              value: 86,
              img: "./美食美发.png",
            },
            {
              name: "生活日用",
              value: 54,
              img: "生活日用.png",
            },
            {
              name: "贡享爱心达人",
              value: 83,
              img: "贡享爱心达人.png",
            },
            {
              name: "医疗保健",
              value: 52,
              img: "医疗保健.png",
            },
            {
              name: "教育培训",
              value: 46,
              img: "教育培训.png",
            },
            {
              name: "运动出行",
              value: 22,
              img: "运动出行.png",
            },
          ],
        };
      },
      methods: {
        GetOrganizeReport() {
          $.get(BASE_URL + '/basic/Report/GetOrganizeReport', ({ data }) => {
            // console.log(data)
            this.exchangeGoodCount = data.Count2
            this.exchangeIntegralCount = data.Count3
            this.icons = data.Items.slice(0, 9).map(i => ({
              name: i.Key,
              value: i.Value,
              img: `./${i.Key}.png`
            }))
          })
        }
      },
      created() {
        this.GetOrganizeReport()
      },
      mounted() { },
      template: `
        <div class="display">
          <div class="title">▎贡享爱心商家/达人</div>
          <div class='icons'>
            <div class="item" v-for="item in icons">
                <img class='icon-img' :src="item.img"/>
                <div>
                  <div class="name">{{item.name}}</div>
                  <div class="value">{{item.value}}</div>
                </div>
            </div>
          </div>
          <div class="totals fss">
            <div class="good">
              <div class="left">
                <span>累计兑换</span>  
                <span>商品</span> 
              </div>
              <div class='value'>{{exchangeGoodCount}} <span class="unit">件</span></div>
            </div>

            <div class="integral">
              <div class="left">
                <span>累计兑换</span>  
                <span>积分</span> 
              </div>
              <div class='value'>{{exchangeIntegralCount}} <span class="unit">分</span></div>
            </div>
          </div>
        </div>
      `,
    });
  </script>

  <!-- 贡享爱心商家/达人 -->
  <script>
    Vue.component("box6", {
      data() {
        return {
          myChart: null,
          option: null,
          bills: [
            { name: "点单", value: 842 },
            { name: "接单", value: 821 },
            { name: "派单", value: 12 },
            { name: "评单", value: 734 },
          ],
          bullStatus: [
            { name: "已认领", value: 75, color: "#3c5cfa" },
            { name: "已交办", value: 12, color: "#f72020" },
            { name: "待认领", value: 21, color: "#fc7041" },
            { name: "已完成", value: 734, color: "#20a5f7" },
          ],
        };
      },
      components: {
        star: {
          data() {
            return {
              myChart: null,
              option: null,
              max: 5,
              stars: [
                { level: 5, value: 623 },
                { level: 4, value: 1 },
                { level: 3, value: 1 },
              ],
            };
          },
          methods: {
            initCharts() {
              this.myChart = echarts.init(
                document.getElementById("echart6_1")
              );
              this.option = {
                title: {
                  text: "▎完成星级",
                  top: 16,
                  left: 10,
                  textStyle: {
                    fontSize: 18,
                    color: "#fff",
                    fontWeight: "700",
                    lineHeight: 18,
                  },
                },

                grid: {
                  left: '16%',
                  right: "6%",
                  bottom: "2%",
                  top: "50",
                  // containLabel: true,
                },
                // tooltip: {
                //   trigger: "axis",
                //   axisPointer: {
                //     type: "none",
                //   },
                //   // formatter: function (params) {
                //   //   return params[0].name + " : " + params[0].value;
                //   // },
                // },
                xAxis: {
                  show: false,
                  type: "value",

                },
                yAxis: [
                  {
                    type: "category",
                    inverse: true,
                    offset: 70,
                    axisLabel: {
                      show: true,
                      align: "left",
                      textStyle: {
                        color: "#d6e2ff",
                      },
                      formatter: this.starFormatter,
                      rich: {
                        star_a: { //星星激活
                          backgroundColor: {
                            image: './star (1).png'
                          },
                        },
                        star_i: { //星星未激活
                          backgroundColor: {
                            image: './star (2).png'
                          },
                        },
                      }
                    },
                    splitLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLine: {
                      show: false,
                    },
                    // data: this.stars.map((i) => i.name),
                  },
                  {
                    type: "category",
                    inverse: true,
                    offset: 25,
                    axisTick: "none",
                    axisLine: "none",
                    show: true,
                    axisLabel: {
                      inside: true,
                      textStyle: {
                        color: "#d6e2ff",
                        fontSize: "12",
                      },
                      // formatter: (value, index) => this.getRank(index),
                      rich: {
                        title: {
                          color: "#d6e2ff",
                          fontSize: 12,
                        },
                      },
                    },
                    data: this.stars.map((i) => i.value),
                  },
                ],
                series: [
                  {
                    name: "星级",
                    type: "bar",
                    barWidth: 16,
                    barCategoryGap: "100%",
                    zlevel: 1,
                    itemStyle: {
                      normal: {
                        barBorderRadius: 55,
                        color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            {
                              offset: 0,
                              color: "#20a5f7",
                            },
                            {
                              offset: 0.05,
                              color: "#2AA9F7",
                            },
                            {
                              offset: 1,
                              color: "#0ff5f8",
                            },
                          ]
                        ),
                      },
                    },
                    data: this.stars.map((i) => i.value),
                  },
                ],
              };
              // 使用刚指定的配置项和数据显示图表。
              this.myChart.setOption(this.option);
            },
            starFormatter(i) {
              const a = '{star_a|}', b = '{star_i|}'
              const level = parseInt(this.stars[i].level)
              return (new Array(level).fill(a).join('') + new Array(this.max - level).fill(b).join(''))
            }
          },
          mounted() {
            this.initCharts();
          },
          template: `
              <div id="echart6_1" ref="echart6_1" style="width:620px;height:190px"></div>
            `,
        },
      },
      methods: {
        initCharts() {
          this.myChart = echarts.init(document.getElementById("echart6"));
          this.option = {
            tooltip: {
              trigger: "item",
            },
            title: {
              text: "▎志愿帮-我为群众办实事",
              top: 16,
              left: 10,
              textStyle: {
                fontSize: 18,
                color: "#fff",
                fontWeight: "700",
                lineHeight: 18,
              },
            },
            legend: {
              orient: "vertical",
              itemWidth: 10,
              itemHeight: 10,
              itemGap: 16,
              top: 90,
              right: "10%",
              formatter: (name) => `${name}: ${this.bills.find((i) => i.name === name)?.value}`,
              textStyle: {
                color: "#d6e2ff",
              },
            },
            series: [
              {
                type: "pie",
                top: -0,
                left: 70,
                radius: [40, 56],
                avoidLabelOverlap: false,
                labelLine: {
                  show: false,
                },
                label: {
                  show: false,
                },
                data: this.bullStatus,
              },
            ],
            color: this.bullStatus.map((i) => i.color),
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(this.option);
        },
        GetFamilyReport() {
          $.get(BASE_URL + '/basic/Report/GetFamilyReport', ({ data }) => {
            this.bills = data.map(i => ({
              name: i.Key,
              value: i.Value,
            }))
            this.myChart.setOption({
              series: [
                {
                  data: this.bills
                }
              ]
            })
          })
        },
        GetFamilyReport2() {
          $.get(BASE_URL + '/basic/Report/GetFamilyReport2', ({ data }) => {
            const children = this.$children[0]
            children.stars = data.map(i => ({ level: i.Key, value: i.Value }))
            children.max = Math.max(...data.map(i => parseInt(i.Key)))
            children.myChart.setOption({
              yAxis: [
                { formatter: children.starFormatter, },
                { data: children.stars.map(i => i.value) }
              ],
              series: [
                { data: children.stars.map(i => i.value) }
              ]
            })
            this.$nextTick(this.$forceUpdate)
          })
        },
      },
      created() {
        this.GetFamilyReport()
        this.GetFamilyReport2()
      },
      mounted() {
        this.initCharts();
      },
      template: `
          <div>
            <div class="volunteer pr">
              <div id="echart6" style="width:620px;height:260px;"></div>
              <div class="data pa fss">
                <div class='item' v-for="item in bills">
                  <div class="name">{{item.name}}</div>
                  <div class="value">{{item.value}}</div>
                </div>
              </div>
            </div>
            <star></star>
          </div>
        `,
    });
  </script>

  <script>
    //zoom做页面适配,1920*1080
    var zoom = 1
    function match() {
      let w = document.body.clientWidth
      w = w > 1200 ? w : 1200
      zoom = w < 1920 ? w / 1920.0 : 1920.0 / w
      document.getElementsByClassName('page')[0].style.zoom = zoom

      //echart也需要进行zoom适配，解决鼠标位置偏移
      // let charts=['echart1','echart3','echart3_1','echart4','echart6','echart6_1']
      // let chartsDom=charts.map(c=>document.getElementById(c))
      // chartsDom.forEach(d=>{
      //   d.style.zoom=zoom
      //   d.style.transform.scale=1/zoom
      // })
    }
    window.onload = match
    window.addEventListener('resize', match)
  </script>

  <script>


    const App = new Vue({
      el: "#app",
      data() {
        return {
          title: 0,
          timer: '',
          upperNumber: [
            '日',
            '一',
            '二',
            '三',
            '四',
            '五',
            '六',
          ],
          charts: []
        };
      },
      components: {},
      methods: {
        //加0
        fill(n) {
          return n = n >= 10 ? n : '0' + n
        },
        setTimer() {
          const fill = this.fill
          let time = new Date()
          let y = time.getFullYear()
          let m = time.getMonth() + 1
          let d = time.getDate()
          let h = time.getHours()
          let mm = time.getMinutes()
          let s = time.getSeconds()
          let w = time.getDay()
          this.timer = `${y}年${fill(m)}月${fill(d)}日 ${fill(h)}:${fill(mm)}:${fill(s)}     ${'星期' + this.upperNumber[w]}`
          // console.log(this.timer)
        },
        match() {
          let charts = ['echart1', 'echart3', 'echart3_1', 'echart4', 'echart6', 'echart6_1']
          this.chartsDom = charts.map(c => document.getElementById(c))
          this.chartsDom.forEach(c => {
            c.style.zoom = zoom
            c.style.transform.scale = 1 / zoom
          })
        },

      },
      created() {
        setInterval(this.setTimer, 1000)
      },
      mounted() {
        // document.addEventListener('resize',this.match)
        console.log("vue mounted");

        // console.log(this.chartsDom)

        // this.chartsDom.forEach(c=>c?.initCharts())
        // this.chartsDom=charts.map(c=>this.$refs[c].initCharts())
      },
    });
  </script>



  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .pr {
      position: relative;
    }

    .pa {
      position: absolute;
    }

    .page {
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      background: radial-gradient(#102357, #020c25);
    }



    .head {
      width: 100%;
      height: 80px;
      color: #fff;
    }

    .head .bg {
      width: 100%;
      height: 80px;
      top: 0;
      left: 0;
      background-image: url('./顶部@2x.png');
      z-index: 20;
    }

    .head .center {
      width: 100%;
      height: 40px;
      top: 10px;
      font-size: 30px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: center;
      line-height: 40px;
      letter-spacing: 0.54px;
      z-index: 10;
    }

    .head .left,
    .head .right {
      width: 500px;
      height: 80px;
      top: 0;
      z-index: 5;
    }

    .head .left {
      left: 0;
      background-image: url('./Union@2x.png');
    }

    .head .right {
      right: 0;
      background-image: url('./Union_1@2x.png');
    }

    .head .left .timer {
      top: 35px;
      left: 70px;
      font-size: 20px;
      line-height: 40px;
      height: 40px;
      color: #fff;
      font-weight: 700;
      white-space: pre-wrap;
    }

    .head .right .logo {
      top: 30px;
      right: 200px;
      width: 234px;
      height: 50px;
      background: url('./未标题-1 1@2x.png');
      background-repeat: no-repeat;
      background-size: 234px 50px;
    }

    .content {
      display: flex;
      /* justify-content: space-evenly; */
      flex-wrap: wrap;
    }

    .title {
      font-size: 18px;
      padding-left: 16px;
      color: #fff;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .box_bg {
      background: radial-gradient(rgba(1, 187, 255, 0),
          rgba(1, 187, 255, 0),
          rgba(1, 187, 255, 0.15));
      border-image: linear-gradient(90deg,
          rgba(1, 187, 255, 0.08) 0%,
          rgba(15, 245, 248, 0.16) 100%,
          rgba(1, 187, 255, 0.08) 100%) 2 2;
      border-radius: 4px;
    }

    .bx_bb {
      box-sizing: border-box;
    }

    .fss {
      display: flex;
    }

    .fcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .box1 {
      width: 599px;
      height: 474px;
      margin: 14px 0 0 16px;
      border: 2px solid #032b4c;
    }

    .box2 {
      width: 628px;
      height: 472px;
      /* border: 2px solid #032b4c; */
      margin: 14px 0 0 18px;
    }

    .box3 {
      width: 628px;
      height: 474px;
      /* border: 2px solid #032b4c; */
      margin: 15px 0 0 18px;
    }

    .box4 {
      width: 599px;
      height: 474px;
      /* border: 2px solid #032b4c; */
      margin: 17px 0 0 16px;
    }

    .box5 {
      width: 628px;
      height: 473px;
      /* border: 2px solid #032b4c; */
      margin: 20px 0 0 19px;
      /* background: #062c57; */
      background: #0a3665;
      /* background: linear-gradient(0deg,rgba(1,187,255,0.00) 0%, rgba(1,187,255,0.00) 50%, rgba(1,187,255,0.15) 100%); */
      border-image: linear-gradient(90deg,
          rgba(1, 187, 255, 0.08) 0%,
          rgba(15, 245, 248, 0.16) 100%,
          rgba(1, 187, 255, 0.08) 100%) 2 2;
      border-radius: 4px;
    }

    .box6 {
      width: 620px;
      height: 474px;
      /* border: 2px solid #08315c; */
      margin: 18px 0 0 16px;
    }

    #echart1 {
      width: 599px;
      height: 200px;
      /* background: rgba(255,255,255,.5); */
    }

    .register-data {
      width: 265px;
      height: 142px;
      top: 52px;
      left: 16px;
      color: #fff;
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .register-data-item {
      width: 120px;
      height: 46px;
    }

    .register-data-item .name {
      width: 120px;
      height: 16px;
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      color: #d6e2ff;
      margin-bottom: 4px;
    }

    .register-data-item .value {
      width: 120px;
      height: 26px;
      font-size: 20px;
      font-weight: 700;
      line-height: 20px;
      color: #fff;
    }

    .register-data-item:nth-child(2n + 2) {
      margin-left: 25px;
    }

    .register-data-item:nth-child(n + 3) {
      margin-top: 50px;
    }

    .register-from {
      margin-top: 20px;
      color: #d6e2ff;
    }

    .register-from .title {
      font-size: 18px;
      padding-left: 16px;
      color: #fff;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .register-from .from {
      width: 567px;
      height: 196px;
      margin-left: 16px;
      font-size: 12px;
      color: #d6e2ff;
      border-left: 1px solid #003e63;
      border-right: 1px solid #003e63;
      border-bottom: 1px solid #003e63;
    }

    .register-from .from .td {
      width: 567px;
      height: 32px;
      background: #043052;
      display: flex;
    }

    .register-from .from .row {
      display: flex;
      font-size: 12px;
      border-bottom: 1px solid #003e63;
    }

    .register-from .from .row:not(:nth-child(n + 4)) {
      color: #fc5959;
    }

    .register-from .from .index {
      width: 50px;
      height: 32px;
      line-height: 32px;
      text-align: center;
    }

    .register-from .from .team {
      height: 32px;
      width: 235px;
      line-height: 32px;
      text-align: center;
    }

    .register-from .from .creator {
      height: 32px;
      width: 300px;
      line-height: 32px;
      padding-left: 8px;
    }

    .register-from .from .count {
      height: 32px;
      width: 115px;
      line-height: 32px;
      padding-left: 8px;
    }

    .register-from .from .td div:not(:first-child) {
      border-left: 1px solid #003e63;
    }

    .level-volunteer {
      width: 630px;
      height: 227px;
    }

    .level-volunteer .standard {
      width: 118px;
      height: 156px;
      top: 80px;
      right: 35px;
    }

    .level-volunteer .standard .item {
      font-size: 16px;
      line-height: 16px;
      color: #d6e2ff;
      font-family: Roboto, Roboto-Regular;
      margin-bottom: 4px;
    }

    .event-count {
      padding-top: 16px;
    }

    .event-count .counts-wrap {
      width: 599px;
      height: 148px;
      flex-wrap: wrap;
    }

    .event-count .counts-wrap .counts {
      width: 336px;
      height: 148px;
      flex-wrap: wrap;
      margin-left: 16px;
    }

    .event-count .counts-wrap .counts .item {
      flex-grow: 0;
    }

    .event-count .counts-wrap .counts .item .name {
      width: 51px;
      height: 16px;
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      color: #d6e2ff;
      margin-bottom: 4px;
      flex-shrink: 0;
    }

    .event-count .counts-wrap .counts .item .value {
      width: 50px;
      height: 26px;
      font-size: 20px;
      font-weight: 700;
      line-height: 20px;
      color: #fff;
    }

    .event-count .counts-wrap .counts .item:not(:nth-child(4n)) {
      margin-right: 44px;
    }

    .event-count .counts-wrap .today-count {
      flex-shrink: 0;
      top: 0;
      left: 388px;
      font-size: 40px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: LEFT;
      color: #12edf7;
    }

    .event-count .counts-wrap .today-count-title {
      height: 26px;
      font-size: 20px;
      line-height: 20px;
      color: #d6e2ff;
      font-weight: 400;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      margin-bottom: 17px;
    }

    .event-count .counts-wrap .unit {
      font-size: 18px;
      font-weight: 700;
    }

    .display {
      padding-top: 16px;
    }

    .display .icons {
      width: 628px;
      padding-left: 16px;
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
    }

    .display .icons .item {
      width: 198px;
      display: flex;
    }

    .display .icons .item:nth-child(n + 4) {
      margin-top: 52px;
    }

    .display .icons .item img.icon-img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    .display .icons .item img.icon-img+div div.name {
      font-size: 12px;
      color: #d6e2ff;
    }

    .display .icons .item img.icon-img+div div.value {
      font-size: 20px;
      color: #fff;
      font-weight: 700;
    }

    .display .totals {
      margin-top: 20px;
    }

    .display .totals .good,
    .display .totals .integral {
      width: 50%;
      height: 135px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .display .totals .good>.left,
    .display .totals .integral>div:first-child {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: #d6e2ff;
      text-align: right;
    }

    .display .totals .good>.value,
    .display .totals .integral>.value {
      font-size: 36px;
      color: #10e5f8;
      margin-left: 10px;
      font-weight: 900;
    }

    .display .totals .good>.value .unit,
    .display .totals .integral>.value .unit {
      font-size: 18px;
      margin-left: -10px;
    }

    .volunteer {
      width: 620px;
      height: 260px;
    }

    .volunteer .data {
      width: 245px;
      top: 65px;
      left: 29px;
      flex-wrap: wrap;
    }

    .volunteer .data .item {
      width: 120px;
    }

    .volunteer .data .item:nth-child(n + 3) {
      margin-top: 41px;
    }

    .volunteer .data .item .name {
      width: 120px;
      height: 26px;
      font-size: 20px;
      font-weight: 400;
      color: #d6e2ff;
      margin-bottom: 4px;
    }

    .volunteer .data .item .value {
      width: 120px;
      height: 26px;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
    }

    .box2 {
      background: #09325e;
    }

    .box2 .img {
      width: 482px;
      height: 480px;
    }

    .box2 .title {
      top: 16px;
      left: 16px;
    }
  </style>
</body>

</html>